<style >
  table.formTable {
    font-family: verdana, arial, sans-serif;
    font-size: 0.875rem;
    color: #333333;
    border-width: 0px;
    border-color: #dcdfe6;
    border-collapse: collapse;
    width: 100%;
  }

  table.formTable td {
    border-width: 0px;
    padding: 20px;
    border-style: solid;
    border-color: #dcdfe6;
    background-color: #ffffff;
    padding:2px;
    text-align: center;
  }

  table.formTable td:first-child {
    width: 100px;
    text-align: right;
  }

  table.formTable td:last-child {
  	 color: #E6A23C; 
  }
  
      #tableIconForBizStylePoint + .layui-table-view .layui-table-body tbody > tr > td {
        padding: 0;
    }

    #tableIconForBizStylePoint + .layui-table-view .layui-table-body tbody > tr > td > .layui-table-cell {
        height: 60px;
        line-height: 60px;
    }
    .tdImg {
        width: 35px;
        height:35px;
        max-width: none;
        cursor: pointer;
    }
    .layui-table-view {
        margin: 0;
    }
    .layui-select-title input{
    	height:28px;
    }
</style>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body table-tool-mini">
            <div class="layui-form toolbar" id="tbToolBar">
                <div class="layui-form-item">
					<div class="layui-inline">
						<button id="btnAddBizVideo" class="layui-btn icon-btn layui-btn-sm"><i class="layui-icon">&#xe654;</i>添加</button>
						<button id="btnImportCameraForexcel" class="layui-btn icon-btn layui-btn-sm"><i class="layui-icon">&#xe654;</i>excel导入</button>
	                  	 <button id="btnSynCameraForVD" class="layui-btn icon-btn layui-btn-sm"><i class="layui-icon">&#xe654;</i>视频同步</button>  
	                  	<!-- <div class="dropdown-menu dropdown-hover">
		                    <button class="layui-btn icon-btn layui-btn-sm">&nbsp;视频同步 <i class="layui-icon layui-icon-drop"></i></button>
		                    <ul class="dropdown-menu-nav">
		                        <li><a>云南民族大学呈贡校区</a></li>
		                        <li><a>蒙自智慧社区</a></li>
		                    </ul>
		                </div> -->
	                 	<button id="btnAddCameraForVD" class="layui-btn icon-btn layui-btn-sm"><i class="layui-icon">&#xe654;</i>视频推送</button>
					</div>
                    <div class="layui-inline" style="float: right;margin-right: 0px;">
                    	<div class="layui-inline" style="padding-right: 0px;margin-right: 0px;height:28px;">
							<label class="layui-form-label w-auto" style="padding-top: 6px;">区域</label>
							<div class="layui-input-inline mr0">
								<input id="classifyIdForQuery" name="classifyId" class="layui-input" type="text" style="height:28px;" placeholder="请选择区域"/>
							</div>
						</div>
						<div class="layui-inline" style="padding-right: 0px;margin-right: 0px;height:28px;">
							<label class="layui-form-label w-auto" style="padding-top: 6px;">名称</label>
							<div class="layui-input-inline mr0">
								<input name="keyword" class="layui-input" type="text" style="height:28px;" placeholder="请输入名称"/>
							</div>
						</div>
						<div class="layui-inline" style="padding-right: 0px;margin-right: 0px;">
							<button class="layui-btn icon-btn layui-btn-sm" lay-filter="formSubSearchBizVideo" lay-submit>
								<i class="layui-icon">&#xe615;</i>查询
							</button>
						</div>					
					</div>
				</div>
				<table class="layui-table" id="tableBizVideo" lay-filter="tableBizVideo"></table>
			</div>
		</div>
	</div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tableBarBizVideo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 表格状态列 -->
<script type="text/html" id="tableStateBizVideo">
#[[  {{#  if(d.deviceStatus === '0'){ }}
    <span style="color: #23aa2e;">在线</span>
  {{#  } else { }}
	<span style="color: #ff0000;">离线</span>
  {{#  } }}
]]#
</script>

<!-- 表格状态列 -->
<script type="text/html" id="tableSynStateBizVideo">
#[[  {{#  if(d.synStatus === '1'){ }}
    <span style="color: #23aa2e;">已同步</span>
  {{#  } else { }}
	<span style="color: #ff0000;">未同步</span>
  {{#  } }}
]]#
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="modelBizVideo">
<div class="layui-card">
	<div class="layui-card-body" style="padding:0px;padding-top: 1px;">
	    <form id="modelBizVideoForm" lay-filter="modelBizVideoForm" class="layui-form model-form">
	        <input name="id" type="hidden"/>
			<table id="modelBizVideoFormTable" class="formTable">
				<tr>
					<td>*设备名称</td>
					<td colspan="3" style="text-align: left;">
	                	<input name="name"  placeholder="请输入名称" type="text" class="layui-input" lay-verType="tips" lay-verify="required" required/>
	                </td>
				</tr>
				<tr>
					<td>设备标识</td>
					<td colspan="3" style="text-align: left;">
	                	<input name="code"  placeholder="请输入标识" type="text" class="layui-input" lay-verType="tips"/>
	                </td>
				</tr>
				<tr>
					<td>*设备分类</td>
					<td colspan="3" style="text-align: left;">
	                	<input id="classifyIdForVideo" lay-filter="classifyIdForVideo" name="classifyId" class="layui-input" type="text" placeholder="输入关键字"/>
	                </td>
				</tr>
				<tr>
					<td>*上级节点名称</td>
					<td colspan="3" style="text-align: left;">
	                	<input id="parentName" name="parentName" class="layui-input" lay-verType="tips" type="text" placeholder="输入上级节点名称"/>
	                </td>
				</tr>
				<tr>
					<td>*视频类型</td>
					<td colspan="3" style="text-align: left;">
				      <select name="type" lay-filter="type"  lay-verify="required" required>
				        <option value="WEBRTC">webRTC</option>
				        <option value="FILE" >MP4视频</option>
				      </select>
	                </td>
				</tr>
				<tr>
					<td>* 画面宽高比</td>
					<td colspan="3" style="text-align: left;">
	                	<input  name="aspectRatio" class="layui-input" type="text" placeholder="输入画面宽高比" lay-verType="tips" lay-verify="required" required/>
	                </td>
				</tr>
			</table> 
		</form>
	</div>
</div>
</script>

<!-- 视频文件地址 -->
<script type="text/html" id="modelVideoFile">
	<tr class="file">
		<td>视频Url</td>
		<td colspan="3" style="text-align: left;">
			<input name="url" placeholder="请输入视频Url" type="text" class="layui-input" lay-verType="tips" lay-verify="required"
			 required />
		</td>
	</tr>
	<tr class="file">
		<td colspan="4">
			<button class="layui-btn" lay-filter="modelSubmitBizVideoForm" lay-submit>保存</button>
		</td>
	</tr>
</script>

<!-- rtc参数 -->
<script type="text/html" id="modelVideoWebrtc">
	<tr class="webrtc">
		<td>* ip</td>
		<td colspan="3" style="text-align: left;">
			<input name="ip" placeholder="请输入ip" type="text" class="layui-input" lay-verType="tips" lay-verify="required"
			 required />
		</td>
	</tr>
	<tr class="webrtc">
		<td>* 用户名</td>
		<td colspan="3" style="text-align: left;">
			<input name="username" placeholder="请输入用户名" type="text" class="layui-input" lay-verType="tips" lay-verify="required"
			 required />
		</td>
	</tr>
	<tr class="webrtc">
		<td>* 密码</td>
		<td colspan="3" style="text-align: left;">
			<input name="password" placeholder="请输入密码" type="text" class="layui-input" lay-verType="tips" lay-verify="required"
			 required />
		</td>
	</tr>
	<tr class="webrtc">
		<td>* 端口</td>
		<td colspan="3" style="text-align: left;">
			<input name="port" placeholder="请输入端口" type="text" class="layui-input" value="8000" lay-verType="tips" lay-verify="required"
			 required />
		</td>
	</tr>
	<tr class="webrtc">
		<td>通道号</td>
		<td colspan="3" style="text-align: left;">
			<input name="channelNum" placeholder="请输入通道号" type="text" class="layui-input" lay-verType="tips" />
		</td>
	</tr>
	<tr class="webrtc">
		<td>* 设备类型</td>
		<td colspan="3" style="text-align: left;">
			<select name="deviceType" lay-filter="deviceType" lay-verify="required" required>
				<option value="HK/IPC">摄像头</option>
				<option value="HK/NVR">硬盘录像机</option>
			</select>
		</td>
	</tr>
	<tr class="webrtc">
		<td>* 设备状态</td>
		<td colspan="3" style="text-align: left;">
			<select name="deviceStatus" lay-filter="deviceStatus" lay-verify="required" required>
				<option value="0">在线</option>
				<option value="1">离线</option>
			</select>
		</td>
	</tr>
	<tr class="webrtc">
		<td>* 监控点类型</td>
		<td colspan="3" style="text-align: left;">
			<select name="monitorType" lay-filter="monitorType" lay-verify="required" required>
				<option value="bolt">枪机</option>
				<option value="ballhead">球机</option>
				<option value="cloud-bolt">云台枪机</option>
			</select>
		</td>
	</tr>
	<tr class="webrtc">
		<td>* 协议类型</td>
		<td colspan="3" style="text-align: left;">
			<select name="protocol" lay-filter="protocol" lay-verify="required" required>
				<option value="rtsp">rtsp</option>
				<option value="onvif">onvif</option>
			</select>
		</td>
	</tr>
	<tr class="webrtc">
		<td>安装地址</td>
		<td colspan="3" style="text-align: left;">
			<input name="channelNum" placeholder="请输入安装地址" type="text" class="layui-input" lay-verType="tips" />
		</td>
	</tr>
	<tr class="webrtc">
		<td colspan="4">
			<button class="layui-btn" lay-filter="modelSubmitBizVideoForm" lay-submit>保存</button>
		</td>
	</tr>
</script>

<!-- 导入弹窗 -->
<script type="text/html" id="modelImport">
<div class="layui-card">
	<div class="layui-card-body" >
		<div class="layui-carousel" id="stepImport" lay-filter="stepImport" style="margin: 0 auto;">
			<div carousel-item>
				<div>
					<input type="file" name="file" id="importAction" style="border:1px;">
					<table class="layui-hide" id="sheetTable"></table>
					<div style="bottom:0;">
						<button id="sheetNext" class="layui-btn layui-btn-primary layui-btn-xs" lay-filter="sheetNext">&emsp;下一步&emsp;</button>
						<button class="layui-btn layui-btn-primary layui-btn-xs" lay-filter="" onclick="layer.closeAll();">&emsp;取消&emsp;</button>
					</div>
				</div>
				<div>
					<table class="layui-hide" id="fieldTable"></table>
					<div style="bottom:0;">
						<button id="sheetPre" class="layui-btn layui-btn-primary layui-btn-xs" lay-filter="sheetPre">&emsp;上一步&emsp;</button>
						<button class="layui-btn layui-btn-primary layui-btn-xs" lay-filter="sheetNext">&emsp;取消&emsp;</button>
						<button id="importSub" class="layui-btn layui-btn-primary layui-btn-xs" lay-filter="importSub">&emsp;开始&emsp;</button>
					</div>
				</div>

			</div>
		</div>
	</div>
</div>
</script>

<!-- 导入弹窗 -->
<script type="text/html" id="modelImportExcel">
<div class="layui-card">
	<div class="layui-card-body" >
		<div class="layui-carousel" id="stepImport1" lay-filter="stepImport1" style="margin: 0 auto;">
			<div>
				<div style="margin-bottom:15px;">
					<a href="">导入模板下载</a>
				</div>
				<div style="margin-bottom:15px;">
					<input type="file" name="file" id="importAction" style="border:1px;">
				</div>
				<div style="margin-bottom:15px;" >
					 	 
						<button id="btnImport" class="layui-btn  " lay-filter="btnImport">&emsp;开始&emsp;</button>
					 
				</div>
			</div>
		</div>
	</div>
</div>
</script>
<script type="text/html" id="selectAimingField" >
	<select id="aiming_{{d.LAY_TABLE_INDEX}}" name='aimingField' lay-verify='' lay-search=''>
        <option value="">-请选择字段-</option>
		#for(field : fieldList)
			<option value="#(field.value)" >#(field.name)</option>
		#end
    </select>
</script>
<!-- js部分 -->
<script>
layui.use(['layer', 'config','form', 'table', 'util', 'admin','dropdown','treeSelect','upload','step'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;
        var config = layui.config;
        var step = layui.step;
        var upload = layui.upload;
        var treeSelect = layui.treeSelect;

        treeSelect.render({
   	        elem: '#classifyIdForQuery',
   	        data: '#(ctx)/sys/dic/selectTree?code=camera-group',
   	        type: 'get',
   	        placeholder: '--请选择--',
   	        height:'28',
   	        search: true,
   	        click: function(d){
   	        },
   	        success: function (d) {
   	        }
    	});
        
        form.render('select');
        // 渲染表格
        var insTb = table.render({
            elem: '#tableBizVideo',
            url: '#(ctx)/biz/video/listData', 
            page: true,
            toolbar: false,
            cellMinWidth: 100,
            cols: [[
                {type: 'numbers', title: '序号'},
                {field: 'name', sort: false, title: '名称'},
                {field: 'groupName', sort: false, title: '所属节点'},
                {field: 'aspectRatio', sort: false, title: '画面宽高比'},
                {field: 'type', sort: false, title: '资源类型'},
                {field: 'status', sort: false, templet: '#tableStateBizVideo', title: '状态', align: 'center'},
				{
                    field: 'createTime', sort: false, templet: function (d) {
                        return util.toDateString(d.createTime);
                    }, title: '创建时间'
                },
                {align: 'left', toolbar: '#tableBarBizVideo', title: '操作', fixed: 'right',width: 170}
            ]],
        });

        // 添加
		$('#btnAddBizVideo').click(function () {
			showEditModel();
		});
        
		$('#btnImportCameraForexcel').click(function () {
        	//showImport();
        	importExcel();
        	return false;
        });
        //视频推送
        $('#btnAddCameraForVD').click(function () {
        	var res = common_ajax.ajaxFunc('#(ctx)/biz/video/synVideoToRTC', {}, "json", null);
			layer.closeAll('loading');
			if(res.code=='200'){
				layer.msg(res.message, {icon: 1});
			}
			else{
				layer.msg(res.message, {icon:2});
			}
			
			insTb.reload({}, 'data'); 
        });
        //视频同步
        $('#btnSynCameraForVD').click(function () {
        	var res = common_ajax.ajaxFunc('#(ctx)/biz/video/synVideoFromRTC', {}, "json", null);
			layer.closeAll('loading');
			if(res.code=='200'){
				layer.msg(res.message, {icon: 1});
			}
			else{
				layer.msg(res.message, {icon:2});
			}
        });

        // 搜索
        form.on('submit(formSubSearchBizVideo)', function (data) {
        	console.log(data);
            insTb.reload({where: data.field}, 'data');
        });

        // 工具条点击事件
        table.on('tool(tableBizVideo)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'edit') { // 修改
            	showEditModel(data);
            } else if (layEvent === 'del') { 
                doDel(data.id, data.name);
            }
        });
        
        // 显示编辑弹窗
        function showEditModel(data) {
        	 admin.open({
                type: 1,
                title: (data ? '修改' : '添加') + '视频',
                content: $('#modelBizVideo').html(),
                area:'500px',
                shade: 0.3,
                offset: 't'	,
                success: function (layero, dIndex) {
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    var url = 'biz/video/save';
                    treeSelect.render({
               	        elem: '#classifyIdForVideo',
               	        data: '#(ctx)/sys/dic/selectTree?code=camera-group',
               	        type: 'get',
               	        placeholder: '--请选择--',
               	        search: true,
               	        click: function(d){
               	        },
               	        success: function (d) {
               	        	if(data && data.classifyId){
            	        		treeSelect.checkNode('classifyIdForVideo', data.classifyId);
            	        	}
               	        }
                	});
                    if(data){
                    	if(data.type=='WEBRTC'){
	                    	$('#modelBizVideoFormTable').append($('#modelVideoWebrtc').html());
                    	}else{
                    		$('#modelBizVideoFormTable').append($('#modelVideoFile').html());
                    	}
                    }else{
                    	$('#modelBizVideoFormTable').append($('#modelVideoWebrtc').html());
                    }
                    form.on('select(type)', function(data){
						if(data.value=='WEBRTC'){
							if($('.webrtc').length>0)return;
							$('.file').remove();
							$('#modelBizVideoFormTable').append($('#modelVideoWebrtc').html());
							form.render('select');
						}else{
							if($('.file').length>0)return;
							$('.webrtc').remove();
							$('#modelBizVideoFormTable').append($('#modelVideoFile').html());
						}
                    });
                    form.val('modelBizVideoForm', data);  // 回显数据
                    // 表单提交事件
                    form.on('submit(modelSubmitBizVideoForm)', function (data) {
                        layer.load(2);
                        var formData={}; 
                        for(var key in data.field){
                        	formData['bizVideo.'+key]=data.field[key];
                        }
                        admin.req(url, formData, function (res) {
                            layer.closeAll('loading');
                            if (res.code == 200) {
                                layer.close(dIndex);
                                layer.msg(res.message, {icon: 1});
                                insTb.reload({}, 'data');
                              	//视频推送
                              	if(res.data.type=='FILE')return;
                                setTimeout(function(){
                                	addVideo(res.data);
                                	insTb.reload({}, 'data');
    				        	},1000)
                            } else {
                                layer.msg(res.message, {icon: 2});
                            }
                        }, 'get');
                        return false;
                    });
                    form.render();
                }
            });
        }
        
        // 删除
        function doDel(id, name) {
        	layer.confirm('确定要克隆“【<span style="color:red;">' + name + '</span>】”吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                layer.load(2);
                admin.req('biz/video/delete', {
                    id: id
                }, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                    	var res = common_ajax.ajaxFunc(rtcSerUrl+'/api/delMedia?id='+id, {}, "json", null);
                    	if(res.code=='0'){
                    		layer.msg('删除成功！', {icon: 1});
                    	}else{
                    		layer.msg('服务端视频删除失败！', {icon: 2});
                    	}
                    	insTb.reload({}, 'data');
                    } else {
                        layer.msg(res.message, {icon: 2});
                    }
                }, 'get');
            });
        }
        
      	//批量添加视频
        function addBatchVD(){
        	var res = common_ajax.ajaxFunc("#(ctx)/biz/video/listDataAll", {coordinateId:'#(coordinateId)'}, "json", null);
            if (res.success) {
                for(var i=0;i<res.data.length;i++){
            		addVideo(res.data[i]);
            	}
            	layer.msg("推送成功！", {icon: 1});
            } else {
                layer.msg(res.message, {icon: 2});
            }
        }

        function importExcel(){
        	layer.open({
                type: 1,
                title: '导入',
                area:['400px','250px'],
                offset: '200px',
                content: $('#modelImportExcel').html(),
                success: function (layero, dIndex) {
                	  
                	upload.render({
                        elem: '#importAction'
                        ,url: '#(ctx)/biz/video/execlImport' 
              		    ,accept: 'file'
              		    ,auto: false                                  
                        ,bindAction: '#btnImport'                   
                        ,done: function(res){
                          if(res.code=='200'){
                        	  layer.msg(res.message, {icon: 1});
                          }
                          else{
                        	  layer.msg(res.message, {icon: 2});
                           }
                              
                        }
                    }); 
                	 
                }
            });
        }
      	
        function showImport(){
        	layer.open({
                type: 1,
                title: '导入',
                area:['400px','500px'],
                offset: '200px',
                content: $('#modelImport').html(),
                success: function (layero, dIndex) {
                	var importIndex = dIndex;
                	step.render({
                        elem: '#stepImport',
                        filter: 'stepImport',
                        width: '100%', //设置容器宽度
                        stepWidth: '400px',
                        height: '400px',
                        stepItems: []
                    });
                	
                	var sheetTable = table.render({
                	    elem: '#sheetTable'
                	    ,data: []
                	    ,cols: [[
                	     	{type:'checkbox'},
                	       	{field:'sheetName',title: 'sheet表'}
                	    ]]
                	});
                	var obj;
                	upload.render({
                        elem: '#importAction'
                        ,url: '#(ctx)/biz/video/deviceImport' 
              		    ,accept: 'file'
                        ,done: function(res){
                          if(res.code=='200'){
                        	  obj = res.data;
                        	  if(res.data.sheets){
                        		  sheetTable.reload({
                        			  data:res.data.sheets
                        		  });
                        	  }
                          }
                        }
                    });
                	var fieldTable = table.render({
                	    	elem: '#fieldTable'
                	    	,height:350
                    	    ,data: []
                    	    ,cols: [[
                    	       	{field:'fieldName',title: '源字段'},
                    	       	{field:'aimingField',title: '目标字段',templet: '#selectAimingField'}
                    	    ]]
                    });
                	var sheetName;
                	$('#sheetNext').click(function () {
                		var checkStatus = table.checkStatus('sheetTable'),data = checkStatus.data;
                    	if(data.length==0){
                    		layer.msg("请选择表！");
                    		return;
                    	}
                    	sheetName = data[0].sheetName;
                		step.next('#stepImport');
                		fieldTable.reload({
              			  	data:obj.fields[data[0].sheetName]
              		  	});
                        return false;
                    });
                	
                	$('#sheetPre').click(function () {
                		step.pre('#stepImport');
                    });
                	
                	$('#importSub').click(function () {
                		var jsons = {};
                		var data = layui.table.cache["fieldTable"];
                		for(var i=0;i<data.length;i++){
                			jsons[data[i].fieldName]=$("#aiming_"+data[i].LAY_TABLE_INDEX).val(); 
                		}
                		var res = common_ajax.ajaxFunc("#(ctx)/biz/video/importAction",{
                			classifyId:'#(classifyId)',
                           	path: obj.filePath,
                           	sheetName:sheetName,
                            data: JSON.stringify(jsons)
                        }, "json", null);
                        layer.closeAll('loading');
                        if (res.code=='200') {
                            layer.close(importIndex);
                            layer.msg(res.message, {icon: 1});
                            videoTb.reload({}, 'data');
                        } else {
                            layer.msg(res.message, {icon: 2});
                        }
                    });
                }
            });
        }
        
        
		//添加视频
        function addVideo(data){
        	var dataJson={};
        	dataJson.dev={
        		"group":"",
        		"id":data.id,
        		"name":data.name,
        		"type":data.deviceType,
        		"protocol":data.protocol,
        		"ip":data.ip,
        		"port":data.port,
        		"usr":data.username,
        		"pwd":data.password
        	}
        	if(data.type=='HK/NVR'){
        		dataJson.channel={
               		"group":"",
                	"id":data.id,
                	"name":data.name,
                	"video": "",
            		"options": "",
                	"channelNum":data.channelNum
               	}
        	}
        	var res = common_ajax.ajaxFunc(rtcSerUrl+'/api/addMedia', JSON.stringify(dataJson), "json", null);
            layer.closeAll('loading');
            if (res.code==0) {
            	//添加成功更新视频数据同步状态
            	var res = common_ajax.ajaxFunc('#(ctx)/biz/video/updataSynStatus', {id:data.id,status:'1'}, "json", null);
            } else {
                layer.msg(res.msg, {icon: 2});
            }
        }
		//同步
		function synVideoFroRtc(){
			layer.load(2);
			var res = common_ajax.ajaxFunc('#(ctx)/biz/video/synCameraFromRTC', {sceneId:sceneId,rtcKey:'rtcSynSerUrl'}, "json", null);
			layer.closeAll('loading');
			if(res.code=='200'){
				layer.msg(res.message, {icon: 1});
				insTb.reload({}, 'data'); 
			}
		}
		
    });
</script>
